<template>
  <div class="content-container">
    <el-card class="header-card">
      <div class="content-header">
        <div class="title">{{ article.title }}</div>
        <div class="meta-info">
          <div class="meta-item"><el-icon><View /></el-icon> {{ article.eyeNum }}</div>
          <div class="meta-item"><el-icon><Star /></el-icon> {{ article.starNum }}</div>
          <div class="meta-item"><el-icon><Calendar /></el-icon> {{ article.createTime }}</div>
          <div class="meta-item"><el-icon><User /></el-icon> {{ article.author }}</div>
        </div>
      </div>
    </el-card>
    <el-card class="content-card">

      <img :src="article.imageUrl" class="content-image" alt="Recipe Image" />
      <div class="content-body" v-html="article.content"></div>
      <el-divider></el-divider>
      <div style="margin-top: 90px; text-align: center">本主题由 管理团队 于 {{ article.shenheTime }} 审核通过</div>
      <div style="margin-top: 70px; margin-bottom: 70px; text-align: center">
        <el-button :type="statusType" :disabled="isCollected" @click="handleCollection">{{ statusText }}</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import {Calendar, Star, View, User} from "@element-plus/icons-vue";
import {collectionFoodArticle, getFoodArticleCollectionCount, getFoodArticleDetail} from "@/api/food.js";
import {ElNotification} from "element-plus";
const route = useRoute();

const article = ref({}); // 文章详情

const id = ref(route.params.id); // 获取文章 ID

const statusType = ref("default"); // 按钮颜色
const isCollected = ref(false); // 是否收藏
const statusText = ref("收藏"); // 按钮文字

onMounted(() => {
  // 获取文章详情
  getArticleDetail();
});

const getArticleDetail = () => {
  // 这里是获取文章详情的 API 接口
  getFoodArticleDetail(id.value).then(res => {
    article.value = res.data;
    if (article.value.collection) {
      statusType.value = "success";
      isCollected.value = true;
      statusText.value = "已收藏";
    } else {
      statusType.value = "default";
      isCollected.value = false;
      statusText.value = "收藏";
    }
    // 获取收藏数量
    getCollectionNumber();
  });
}

const getCollectionNumber = () => {
  // 这里是获取收藏数量的 API 接口
  getFoodArticleCollectionCount(id.value).then(res => {
    article.value.starNum = res.data;
  });
}

const handleCollection = () => {
  // 这里是收藏文章的 API 接口
  collectionFoodArticle(id.value).then(res => {
    ElNotification({
      title: '收藏成功',
      message: '文章已收藏',
      type:'success'
    });
    getArticleDetail();
  });
}


</script>

<style scoped>
.content-container {
  max-width: 1000px; /* 设置最大宽度 */
  /* 自动水平居中 */
  margin: 10px auto auto;
}

.header-card {
  margin-bottom: 5px; /* 卡片之间的间距 */
}

.title {
  font-size: 18px; /* 标题字体大小 */
  font-weight: bold; /* 标题加粗 */
  margin-bottom: 10px; /* 标题与元信息之间的间距 */
}

.content-card {
  padding: 20px;    /* 卡片内边距 */
}

.meta-info {
  display: flex;   /* 使用 Flexbox 布局 */
  flex-wrap: wrap; /* 允许换行 */
  align-items: flex-start; /* 垂直居中 */
  gap: 20px;       /* 每个项目之间的间距 */
  font-size: 14px; /* 元信息字体大小 */
  color: #999;     /* 元信息颜色 */
}

.meta-item {
  white-space: nowrap; /* 保持文本不换行 */
}

.content-image {
  width: 100%; /* 图片宽度 */
  height: auto; /* 自适应高度 */
  margin-bottom: 15px; /* 图片与内容之间的间距 */
}

.content-body {
  font-size: 16px; /* 正文字体大小 */
}
</style>
